<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填报系统</title>
    <!-- 引入 bootstrap 开始 -->
    <link rel="stylesheet" href="plug/bootstrap/css/bootstrap.min.css">
    <script src="resource/js/jquery-1.11.1.js"></script>
    <script src="plug/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入 bootstrap 结束 -->


    <style>
        /**能填写工时的格子*/
        .fileDiv {
            float: left;
            /*display:inline-block;*/
            width: 59px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border: 1px solid #ccc;
            /*margin-right: 2px;*/
            margin-bottom: 2px;
            position:relative;
        }
        /** 左侧 人员列表、上方日期 的格子*/
        .fileDiv2 {
            float: left;
            /*display:inline-block;*/
            width: 59px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border: 1px solid #ccc;
            /*margin-right: 2px;*/
            margin-bottom: 2px;
            background-color: rgba(190, 200, 186, 0.65);
        }
        /**鼠标阔选后的颜色*/
        .seled {
            border: 2px solid blue;
            background-color: #D6DFF7;
        }


        /**星期天置灰色，不能选择*/
        .fileDivdis {
            float: left;
            /*display:inline-block;*/
            width: 59px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            /*margin-right: 2px;*/
            margin-bottom: 2px;
            border: 1px dotted black;
            background-color: #9a9cad;
        }

        /**一个小格子里面要放四个小格子*/
        .fileDiv4_1 {
            float: left;
            /*display:inline-block;position:absolute;*/
            height: 16px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            overflow: hidden;
        }
        /**小格子四个*/
        .width_4{
            width:13px;
        }
        /**小格子3个*/
        .width_3{
            width:41px;
        }
        /**小格子2个*/
        .width_2{
            width:27px;
        }
        /**小格子1个*/
        .width_1{
            width:55px;
        }

    </style>




    <script>
        //根据年月获取当月最大天数
        function getMonthMaxDay(year,month) {
            var thisDate ;
            if(!year || !month || isNaN(year) || year < 0 || isNaN(month) || month < 0){//没有传递年份，或者错误的年份，即可认为没有月份
                var date  = new Date();
                year = date .getFullYear();
                month = date.getMonth() + 1 ;
            }
            thisDate = new Date(year,month ,0); //当天数为0 js自动处理为上一月的最后一天
            return  thisDate.getDate();
        }

        function getNowWeekDay(year,month,day) {
            var d =  new Date();
            if(!year){
                year = d.getFullYear();
            }
            if(!month){
                month = d.getMonth()+1;
            }
            //day //不可能为空
            var dateStr = year+'-'+month+'-'+day;
            var date =  new Date(Date.parse(dateStr.replace(/-/g, "/")));
            var str = "日一二三四五六".charAt(date.getDay());
            return str;
        }



        function generalSearch() {//生成查询的下拉框
            var nowDate  =  new Date();
            var nowYear =  nowDate .getFullYear();
            var nowMonth = nowDate.getMonth() + 1 ;
            var appendMonth = "";
            for(var i=1;i<=12;i++){
                if(i!=nowMonth){
                    appendMonth += '<option>'+i+'</option>';
                }else{
                    appendMonth += '<option selected >'+i+'</option>';
                }
            }
            $("#searchMonth").append(appendMonth);
            var appendYear = "";
            for(var i=2016;i<=2022;i++){
                if(i!=nowYear){
                    appendYear += '<option>'+i+'</option>';
                }else{
                    appendYear += '<option selected >'+i+'</option>';
                }
            }
            $("#searchYear").append(appendYear);
        }

        //根据选择的年月份生成，没有默认为当前月份
        function generalDiv(users,year,month) {
            if(!users){
                users = initUsers;
            }
            //点击根据年月查询，重新加载div，重新赋值year 和 month
            year = $("#searchYear").val();
            month = $("#searchMonth").val();
            if(!year || !month || isNaN(year) || year < 0 || isNaN(month) || month < 0){//没有传递年份，或者错误的年份，即可认为没有月份
                var nowDate  =  new Date();
                year = nowDate .getFullYear();
                month = nowDate.getMonth() + 1 ;
            }
            var maxNum = getMonthMaxDay(year,month);
            if(maxNum>27){//这个必须大于27的
                if(users){
                    var appendContent = "";
                    var clearFloatHtml = '<div style="clear: both;"></div>';//清除浮动
                    for(var i=0;i<users.length;i++){
                        var user = users[i];
                        var userName = user.userName ;
                        var userId = user.userId  ;
                        appendContent += '<div class="fileDiv2">'+userName+'</div>'
                        //添加每月的日期
                        for(var k=1;k<=maxNum;k++){
                            var thisTitle = year+"-"+month+"-"+ k;

                            var ap = "fileDiv";
                            var weekDay = getNowWeekDay(year,month,k);

                            //生成四个小格子...
                            var div4_1 = '';
                            if(weekDay=="六" || weekDay=="日"){
                                var thisTitle2 = year+"-"+month+"-"+ k;
                                ap = "fileDivdis";
                            }else {

                                if(k%5==0){//测试
                                    div4_1='<div class="fileDiv4_1 width_4" flag="lawngreen"  style="background-color: lawngreen" title="项目一order1，2小时" >o1，2小时</div>' +
                                        '<div class="fileDiv4_1 width_4"   flag="lightblue" style="background-color: lightblue" title="项目一order2，2小时"  >02，2小时</div>' +
                                        '<div class="fileDiv4_1 width_4"  flag="lightgoldenrodyellow" style="background-color: lightgoldenrodyellow" title="项目一order3，2小时"  >o3，2小时</div>' +
                                        '<div class="fileDiv4_1 width_4"  flag="olivedrab" style="background-color: olivedrab" title="项目一order4 ，2小时"  >o4 ，2小时</div>';
                                }else if(k%4==0){
                                    div4_1='<div class="fileDiv4_1 width_2" flag="lawngreen" style="background-color: lawngreen" title="项目一order3，4小时" >o3，4小时</div>' +
                                        '<div class="fileDiv4_1 width_2" flag="olivedrab"  style="background-color: olivedrab" title="项目一order4 ，4小时" >o4 ，4小时</div>';
                                }else if(k%3==0){
                                    div4_1='<div class="fileDiv4_1 width_1" flag="lightcoral" style="background-color: lightcoral" title="o8项目8小时" >o8项目8小时</div>';
                                }//其他的空
                            }
                            //生成小格子
                            //小格子里面要生成四个小格子。用来分辨工时
                            appendContent += ' <div class="'+ap+'" title="'+ userName+"_"+ userId+ "_" +thisTitle+'" >'+div4_1+'</div>';
                        }
                        appendContent += clearFloatHtml;
                    }
                    //先动态生成一个标题
                    var appendWeekDay = '<div class="fileDiv2"></div>';
                    var appendTitle =  '<div class="fileDiv2">成员名称</div>';

                    var weekDay01 = getNowWeekDay(year,month,1);//获取当月一号是星期几
                    var weekStr = "一二三四五六日";
                    var beginMun = weekStr.indexOf(weekDay01);//计算出第一个在字符的位置，从0开始的
                    for(var m=0;m<maxNum;m++){//序号从1开始
                        appendTitle += ' <div class="fileDiv2">' + month+"-"+(m+1)+'</div>';
                        //var weekDay = getNowWeekDay(year,month,m+1);// 这样每次都调用该方法，增加开销
                        var atNum =   (m+beginMun)%7  ;//重新排列位置;
                        appendWeekDay += ' <div class="fileDiv2">'+ weekStr.charAt( atNum ) +'</div>';
                    }
                    var appendHtml =  '<div>' + appendWeekDay +  clearFloatHtml + appendTitle + clearFloatHtml + appendContent + ' </div>';
                    $("#optAreaDiv").html("");//清空以前的
                    $("#optAreaDiv").append(appendHtml);
                }
            }
        }

        //users 作为全局变量，不让不能查询
        var initUsers = [{
            userId:'bd001',
            userName:'员工A'
        },{
            userId:'bd002',
            userName:'员工B'
        },{
            userId:'bd003',
            userName:'员工CC'
        },{
            userId:'bd004',
            userName:'员工DD'
        },{
            userId:'bd005',
            userName:'员工E'
        },{
            userId:'bd006',
            userName:'员工F'
        },{
            userId:'bd007',
            userName:'员工G'
        }]

        $(function () {
            generalDiv(initUsers);//生成数据
            generalSearch();//生成查询条件
        });

    </script>


</head>
<body   >
<div>

    <!--


    -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">测试</a>
            </div>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
        </div>
    </nav>


    <div>
        <button onclick="getChooseDiv()">获取选中的div</button>
        <hr/>
        <select id="searchYear"></select>年
        <select id="searchMonth"></select>月
        <button onclick="generalDiv()">根据年月重新生成</button>
        <div id="optAreaDiv" style="border: 2px solid yellow;width:1930px;"></div>
    </div>


</div>











<button data-toggle="modal" data-target="#myModal">点击加载模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    项目列表
                </h4>
            </div>
            <div class="modal-body">

                <table>
                    <tr>
                        <td><input type="checkbox" /></td><td>网易阴阳师</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" /></td><td>腾讯和平精英</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" /></td><td>盛大疯狂赛车</td>
                    </tr>
                </table>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




</body>

<script>
    //bootstrap 模态框的显示和隐藏
    function showModel() {
        $('#myModal').modal({
            show: true,
            backdrop:'static'
        })
    }
</script>



<script type="text/javascript">




    //这里要获取X轴滚动条位置
    function getPageScroll() {
        var x ;
        if (window.pageYOffset) {    // all except IE
            x = window.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollLeft) {    // IE 6 Strict
            x = document.documentElement.scrollLeft;
        } else if (document.body) {    // all other IE
            x = document.body.scrollLeft;
        }
        return x;
    }
    //这里要获取Y轴滚动条位置
    function getPageScrollY() {
        var  y;
        if (window.pageYOffset) {    // all except IE
            y = window.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {    // IE 6 Strict
            y = document.documentElement.scrollTop;
        } else if (document.body) {    // all other IE
            y = document.body.scrollTop;
        }
        return y;
    }
    //获取
    function getChooseDiv() {
        var count = 0;
        var selInfo = "";
        var fileNodes = document.getElementsByClassName("fileDiv");
        for (var i = 0; i < fileNodes.length; i++) {
            if (fileNodes[i].className.indexOf("seled") != -1) {
                count++;
                selInfo += fileNodes[i].getAttribute("title") + "\n";
            }
        }
        console.log("选中内容:"+selInfo);
        return count;
    }

    $(function () {
        $("[class='fileDiv']").on("click", function () {
            var  evt = window.event || arguments[0];
            clearEventBubble(evt);
            var thisClass = $(this).attr("class");
            if (thisClass.indexOf("seled") != -1) {//选中了
                $(this).removeClass("seled");

                /* //判断下面有没有div
                 var divs = $(this).find("div");
                 if(divs){
                     for(var n=0;n<divs.length;n++){
                         $(divs[n]).removeAttr("style");
                         var initBack = "background-color:"+$(divs[n]).attr("flag")+";";
                         $(divs[n]).attr("style",initBack);
                     }
                 }*/

            } else {
                $(this).addClass("seled");

                /* //判断下面有没有div
                 var divs = $(this).find("div");
                 if(divs){
                     for(var n=0;n<divs.length;n++){
                         $(divs[n]).removeAttr("style");
                         $(divs[n]).addClass("seled");
                         //$(divs[n]).attr("style","background-color:#D6DFF7;");
                     }
                 }*/

            }
        });
    });

    (function () {



        //指定范围内 onmousedown , (  document 是 对整个页面)
        var optAreaDiv = document.getElementById("optAreaDiv");


        optAreaDiv.oncontextmenu = function(e){
            if(e.button == 2) {
                e.preventDefault();
                if(getChooseDiv()>0){
                    showModel();
                }
            }
        };

        optAreaDiv.onmousedown = function () {
            var evt = window.event || arguments[0];
            if(evt.button != 0){//只让 数遍左键 起作用 0 左 1 中 2 右
                if(evt.button == 2  && getChooseDiv()>0){//选中了格子 右键点击
                    //alert("假设这里有弹框");
                    // showModel();这种方式不可取
                }
                return;
            }


            var selList = [];
            var fileNodes = document.getElementsByClassName("fileDiv");
            for (var i = 0; i < fileNodes.length; i++) {
                if (fileNodes[i].className.indexOf("fileDiv") != -1) {
                    fileNodes[i].className = "fileDiv";
                    selList.push(fileNodes[i]);
                }
            }

            var isSelect = true;

            var pageScroll =  getPageScroll();
            var pageScrollY =  getPageScrollY();

            var startX = (evt.x || evt.clientX) + parseInt(pageScroll);
            var startY = (evt.y || evt.clientY)+ parseInt(pageScrollY);



            var selDiv = document.createElement("div");
            selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
            selDiv.id = "selectDiv";
            document.body.appendChild(selDiv);

            selDiv.style.left = startX + "px";
            selDiv.style.top = startY + "px";

            var _x = null;
            var _y = null;
            clearEventBubble(evt);

            optAreaDiv.onmousemove = function() {
                evt = window.event || arguments[0];
                if (isSelect) {
                    if (selDiv.style.display == "none") {
                        selDiv.style.display = "";
                    }
                    _x = (evt.x || evt.clientX)+pageScroll;
                    _y = (evt.y || evt.clientY)+pageScrollY;
                    selDiv.style.left = Math.min(_x, startX) + "px";
                    selDiv.style.top = Math.min(_y, startY) + "px";
                    selDiv.style.width = Math.abs(_x - startX) + "px";
                    selDiv.style.height = Math.abs(_y - startY) + "px";

                    // ---------------- 关键算法 --------------------- 
                    var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
                    var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
                    for (var i = 0; i < selList.length; i++) {
                        var sl = selList[i].offsetWidth + selList[i].offsetLeft;
                        var st = selList[i].offsetHeight + selList[i].offsetTop;
                        if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
                            if (selList[i].className.indexOf("seled") == -1) {
                                selList[i].className = selList[i].className + " seled";
                            }
                        } else {
                            if (selList[i].className.indexOf("seled") != -1) {
                                selList[i].className = "fileDiv";
                            }
                        }

                        //判断下面有没有div
                        /*       var divs = $(this).find("div");
                               if(divs){
                                   for(var n=0;n<divs.length;n++){
                                       $(divs[n]).removeAttr("style");
                                       $(divs[n]).attr("style","background-color:#D6DFF7;");
                                   }
                               }*/


                    }


                }
                clearEventBubble(evt);
            }

            document.onmouseup = function () {
                isSelect = false;
                if (selDiv) {
                    document.body.removeChild(selDiv);
                    //showSelDiv(selList);
                }
                selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
            }
        }
    })();

    function clearEventBubble(evt) {
        if (evt.stopPropagation)
            evt.stopPropagation();
        else
            evt.cancelBubble = true;
        if (evt.preventDefault)
            evt.preventDefault();
        else
            evt.returnValue = false;
    }

    function showSelDiv(arr) {
        var count = 0;
        var selInfo = "";
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].className.indexOf("seled") != -1) {
                count++;
                selInfo += arr[i].innerHTML + "\n";
            }
        }
        console.log("共选择 " + count + " 个文件，分别是：\n" + selInfo);
        console.log(" 暂时没有算是点击选中的 ");

    }
</script>

</html>